<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>店铺主页</title><link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/store.css"/>
		<script src="js/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/flexible_css.debug.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/html5shiv.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="zhuye_header">
			<div class="zhuye_back">
				<a href="index.html">
				<img src="img/fanhui@2x.png"/>
				</a>
			</div>
			<div class="zhuye_touxiang">
				<img src="img/mytouxiang.png"/>
			</div>
			<div class="zhuye_h1">
				<h1>胖虎寄售号</h1>
				<span class="zhueye_span1">V3</span>
				<span class="zhueye_span2">公益达人</span>
			</div>
		</div>
		<div class="zhuye_fensi">
			<span>粉丝 480</span>
			<span>售出 933</span>
			<span>信用 30</span>
		</div>
		<div class="zhueye_guangzhu">
			<span class="my_span">关注</span>
			<span>聊天</span>
			<span>达人Show</span>
		</div>
		<div class="zhueye_pingjia">
			<p>全部宝贝(700)</p>
			<span>虎友评价</span>
		</div>
		<div class="zhuye_sousuo">
			<input type="text" name="" class="" placeholder="点击搜索" />
		</div>	
		<div class="zhuye_nav">
			<ul>
				<li class="zhuye_list">类别</li>
				<li class="zhuye_list">品牌</li>
				<li class="zhuye_list">排序</li>
				<li class="zhuye_shaixuan">筛选</li>
			</ul>
		</div>
		<section class="index_goods" id="index_vue">
			<dl v-for='info in infosObj'>
				<dt><a href=""><img v-bind:src="info.imgUrl"></a></dt>
				<dd>
					<p>{{info.content}}</p>
					<p>{{info.price}}	<span class="index_heart"><img v-bind:src="info.heartUrl"></span></p>
				</dd>
			</dl>
		</section>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
		  		el:'#index_vue',
		  		data:{
		  			infosObj:[
		   				{imgUrl:'img/goods1.png',content:'Dior五格戴妃包刺绣盾牌限量版，92新，边角和金',price:'￥11800',heartUrl:'img/weixihuan@2x.png'},
		   				{imgUrl:'img/goods2.png',content:'【全新DW女款尼龙】36mm直径，粉白蓝色表',price:'￥36500',heartUrl:'img/weixihuan@2x.png'},
		   				{imgUrl:'img/goods1.png',content:'Dior五格戴妃包刺绣盾牌限量版，92新，边角和金',price:'￥11800',heartUrl:'img/weixihuan@2x.png'},
		   				{imgUrl:'img/goods2.png',content:'【全新DW女款尼龙】36mm直径，粉白蓝色表',price:'￥36500',heartUrl:'img/weixihuan@2x.png'}
	   				]
		  		}
		  	})
			$('.my_span').click(function(){
				if ($(this).html() == '关注'){
					$(this).addClass('span');
					$(this).html('已关注');
					this.style.backgroundColor = "pink";
					} else{
					$(this).removeClass('span');
					$(this).html('关注');
					this.style.backgroundColor = "transparent";
				}
			})
		</script>
		
		
	</body>
</html>
